<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.div_1{
				/*绝对定位*/
				/*position: absolute;
				top: 300px;
				left: 300px;*/
				/*相对定位*/
				/*position: relative;
				top: 300px;
				left:300px ;*/
				/*固定定位*/
				position: fixed;
				top: 150px;
				left: 150px;
				width: 200px;
				height: 200px;
				background-color: red;
				/*置于底层位置，数值越大层数越高*/
				z-index: -1;
			}
			.div_2{
				/*初始位置的操作*/
				position: static;
				top: 50px;
				left: 100px;
				width: 200px;
				height: 200px;
				background-color: cyan;
			}
		</style>
	</head>
	<body>
		<div class="div_1">1</div>
		<div class="div_2">2</div>
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
	</body>
</html>
<!--
	绝对定位:离开原先位置之后释放之前的位置       基于外层父级标签来说

	相对定位：定位离开之后之前的位置没有释放，基于之前的位置来说
	
	固定定位：始终是基于浏览器的左向上角定位  适合做广告
-->
